<template>
    <div class="contarner-page " @click.stop="showLanguageHandel">
        <div class="">
            <page-header :index="'1'" @goAdmin="goAdmin" @showDialogVisible="showDialogVisible" @logOut="logOut"
                ref="languageRef"></page-header>
            <div class="head container">
                <div :class="Reverse ? 'Reverse' : ''">
                    <div class="userInfo-box ">
                        <div class="bg-img  flex_">
                            <div class="info">
                                <div class="title">IPTV Playlist</div>
                                <div class="flex_ item">
                                    <div class="name">{{ $t('porter.nickname') }}:</div>
                                    <div>{{ userInfo.nickname }}</div>
                                    <!-- <el-tag style="margin-left: 10px;" size="mini" type="success">{{ $t('porter.normal')
                                }}</el-tag> -->
                                </div>
                                <div class="flex_ item">
                                    <div class="name">{{ $t('porter.Totalrevenue') }}：</div>
                                    <div>${{ userInfo.invitation_rewards }}</div>
                                </div>
                                <div class="flex_ item">
                                    <div class="name">{{ $t('porter.Withdrawn') }}：</div>
                                    <div>${{ userInfo.withdrawn_rewards }}</div>
                                    <div class="flex_ withdrawable">
                                        <div class="name">{{ $t('porter.Withdrawable') }}：</div>
                                        <div>${{ userInfo.remaining_withdrawable_rewards }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="btns flex_between" :class="Reverse ? 'Reverse' : ''">
                    <el-button class="Applyforwithdrawal"
                        @click="shenqingtixian">{{ $t('porter.Applyforwithdrawal') }}</el-button>
                    <div class="flex_">
                        <el-button class="Withdrawalrules">{{ $t('porter.Withdrawalrules') }}</el-button>
                        <el-button @click="getWithdrawListHandel"
                            class="Withdrawalsrecord">{{ $t('porter.Withdrawalsrecord') }}</el-button>
                    </div>
                </div>
                <el-card class="box-card" style="margin-top: 30px;">
                    <div class="flex_between" style="margin-bottom: 20px;" :class="Reverse ? 'Reverse' : ''">
                        <div class="myMedia">{{ $t('porter.myMedia') }}</div>
                        <div class="addbtn flex_ shou PCSHOW" @click="add">
                            <div class="imgbg"></div>
                            <div>{{ $t('porter.addMedia') }}</div>
                        </div>
                        <div class="APPSHOW appadd" @click="add">{{ $t('porter.addMedia') }}</div>
                    </div>
                    <el-table class="my-custom-table" :data="mediaList" align="center" border :header-cell-style="{
        background: 'transparent !important', 'border-color': '#344264'
    }" style="background-color: transparent;" :class="Reverse ? 'Reverse' : ''">
                        <el-table-column prop="media_name" width="100" align="center" :label="$t('porter.media_name')">
                        </el-table-column>
                        <el-table-column :label="$t('porter.media_cover')" width="90" align="center" prop="media_cover">
                            <template slot-scope="scope">
                                <el-image style="width: 50px; height: 50px" fit="cover" :src="scope.row.media_cover"
                                    :preview-src-list="scope.row.imgList">
                                </el-image>
                            </template>

                        </el-table-column>
                        <el-table-column prop="import_totals" align="center" width="60" :label="$t('porter.Import')">
                        </el-table-column>
                        <el-table-column prop="play_totals" align="center" :label="$t('porter.Play')" width="50">
                        </el-table-column>
                        <el-table-column prop="adView_totals" align="center" width="70" :label="$t('porter.adView')">
                        </el-table-column>
                        <el-table-column prop="adView_click_totals" align="center" width="100"
                            :label="$t('porter.adView_click')">
                        </el-table-column>
                        <el-table-column prop="revenue_totals" align="center" width="100"
                            :label="$t('porter.Gross_Income')">
                        </el-table-column>
                        <el-table-column prop="status" width="100" align="center" :label="$t('porter.status')">
                            <template #default="scope">
                                <el-tag v-if="scope.row.status == 0" size="mini"
                                    type="success">{{ $t('porter.normal') }}</el-tag>
                                <el-tag v-if="scope.row.status == 1" size="mini"
                                    type="danger">{{ $t('porter.ban') }}</el-tag>
                                <el-tag v-if="scope.row.status == 2" size="mini"
                                    type="warning">{{ $t('porter.Reviewing') }}</el-tag>
                                <el-tag v-if="scope.row.status == 3" size="mini"
                                    type="danger">{{ $t('porter.Rejected') }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="reason" align="center" :label="$t('porter.reason')">
                        </el-table-column>
                        <el-table-column prop="update_date" align="center" :label="$t('porter.update_time')" width="90">
                        </el-table-column>
                        <el-table-column :label="$t('porter.operate')" width="170" align="center"
                            class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-button link type="warning" size="mini" plain
                                    @click="xiugaiziyuan(scope.row)">{{ $t('porter.edit') }}</el-button>
                                <el-button :disabled="scope.row.status != 0" link type="primary" size="mini" plain
                                    @click="handleDetail(scope.row)">{{ $t('porter.detail') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination v-show="total > 0" layout="prev, pager, next" :current-page="queryParams.page"
                            :page-size="queryParams.size" :total="total" @current-change="initMediaList">
                        </el-pagination>
                    </div>
                </el-card>
            </div>
            <el-dialog custom-class="porter-dialog" :width="dialogWidth" :title="$t('porter.addMedia')"
                :visible.sync="dialogVisible">
                <el-form ref="form" :model="form" label-width="122px" :class="Reverse ? 'Reverse' : ''">
                    <el-form-item :label="$t('porter.media_name')">
                        <el-input v-model="form.media_name"
                            :placeholder="$t('porter.Pleasefillintheresourcename')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('porter.media_url')">
                        <el-input v-model="form.media_url"
                            :placeholder="$t('porter.Pleasefillintheresourceaddress')"></el-input>
                    </el-form-item>
                    <!-- 未做多语言 -->
                    <el-form-item :label="$t('porter.media_type')">
                        <el-select v-model="form.type_id" :placeholder="$t('porter.Pleaseselect')"
                            style="display: block;" :popper-append-to-body="false" popper-class="dropdown">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.type" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 未做多语言 -->
                    <el-form-item :label="$t('porter.media_Country')">
                        <el-select v-model="form.country_id" :placeholder="$t('porter.Pleaseselect')"
                            style="display: block;" :popper-append-to-body="false" popper-class="dropdown">
                            <el-option v-for="item in cityList" :key="item.id" :label="item.city" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('porter.media_cover')">
                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :http-request="uploadHandel" :on-remove="remeveFile">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="button-porter1"
                        @click="dialogVisible = false">{{ $t('porter.Cancel') }}</el-button>
                    <el-button class="button-porter-play" type="primary"
                        @click="addMedia">{{ $t('porter.Confim') }}</el-button>
                </span>
            </el-dialog>
            <el-dialog custom-class="porter-dialog porter-dialog-link" :width="dialogWidth1"
                :title="$t('porter.spreadLink')" :visible.sync="dialogVisible1" @close="close">
                <div class="flex_between" style="margin-bottom: 20px;" :class="Reverse ? 'Reverse' : ''">
                    <div class="media_name_dialog">{{ media_name }}</div>
                    <div class="flex_ createLink PCSHOW shou" @click="createLink">
                        <img src="@/assets/link.webp" class="img" alt="">
                        {{ $t('porter.createLink') }}
                    </div>
                    <div class="APPSHOW appadd" @click="createLink">{{ $t('porter.createLink') }}</div>
                </div>
                <el-table class="my-custom-table" :header-cell-style="{
        background: 'transparent !important', 'border-color': '#344264'
    }" style="background-color: transparent;" :data="links" align="center" border :class="Reverse ? 'Reverse' : ''">
                    <el-table-column prop="media_name" width="120" align="center" :label="$t('porter.media_name')">
                    </el-table-column>
                    <el-table-column prop="link_url" width="120" show-overflow-tooltip align="center"
                        :label="$t('porter.media_link')">
                    </el-table-column>
                    <el-table-column prop="import_total" align="center" :label="$t('porter.Import')">
                    </el-table-column>
                    <el-table-column prop="play_total" align="center" :label="$t('porter.Play')">
                    </el-table-column>
                    <el-table-column prop="adView_total" align="center" :label="$t('porter.adView')">
                    </el-table-column>
                    <el-table-column prop="adView_click_total" align="center" width="120"
                        :label="$t('porter.adView_click')">
                    </el-table-column>
                    <el-table-column prop="revenue_total" width="120" align="center" :label="$t('porter.revenue')">
                    </el-table-column>
                    <el-table-column prop="status" align="center" :label="$t('porter.status')">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0" size="mini" type="success">
                                {{ $t('porter.normal') }}</el-tag>
                            <el-tag v-if="scope.row.status == 1" size="mini" type="danger">{{ $t('porter.Disable')
                            }}</el-tag>

                        </template>
                    </el-table-column>
                    <el-table-column prop="update_date" align="center" :label="$t('porter.update_time')" width="180">
                    </el-table-column>
                    <el-table-column :label="$t('porter.operate')" width="180" align="center"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" size="mini" v-if="scope.row.status == 0" plain
                                @click="Enable(scope.row)">{{ $t('porter.Disable')
                            }}</el-button>
                            <el-button link type="primary" size="mini" v-if="scope.row.status == 1" plain
                                @click="Enable(scope.row)">{{ $t('porter.Enable')
                            }}</el-button>
                            <el-button link type="success" size="mini" plain @click="copy(scope.row)">{{
        $t('porter.copy')
    }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('porter.Analoginterface')" width="400" align="center"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" size="mini"
                                @click="importHandel(scope.row)">import</el-button>
                            <el-button link type="success" size="mini" @click="play(scope.row)">play</el-button>
                            <el-button link type="warning" size="mini" @click="adview(scope.row)">Watch
                                ad</el-button>
                            <el-button link type="danger" size="mini" @click="adviewClick(scope.row)">click on
                                ad</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination class="linksClass" v-show="total1 > 0" layout="prev, pager, next"
                        :current-page="queryParams1.page" :page-size="queryParams1.size" :total="total1"
                        @current-change="getLinkList">
                    </el-pagination>
                </div>
            </el-dialog>
            <el-dialog :width="dialogWidth" custom-class="porter-dialog" :title="$t('porter.Applyforwithdrawal')"
                :visible.sync="dialogVisible2">

                <el-form ref="form" :model="form1" label-width="150px" :class="Reverse ? 'Reverse' : ''">
                    <el-form-item :label="$t('porter.bankcard')">
                        <el-input v-model="form1.email"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('porter.WithdrawalAmount')">
                        <el-input v-model="form1.amount"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="button-porter1"
                        @click="dialogVisible2 = false">{{ $t('porter.Cancel') }}</el-button>
                    <el-button class="button-porter-play" type="primary"
                        @click="tixian">{{ $t('porter.Confim') }}</el-button>
                </span>
            </el-dialog>
            <el-dialog :title="$t('porter.edit')" :width="dialogWidth" custom-class="porter-dialog"
                :visible.sync="dialogVisible3" :class="Reverse ? 'Reverse' : ''">
                <el-form ref="form" :model="form" label-width="140px">
                    <el-form-item :label="$t('porter.media_name')">
                        <el-input v-model="form.media_name"
                            :placeholder="$t('porter.Pleasefillintheresourcename')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('porter.media_url')">
                        <el-input v-model="form.media_url"
                            :placeholder="$t('porter.Pleasefillintheresourceaddress')"></el-input>
                    </el-form-item>
                    <!-- 未做多语言 -->
                    <el-form-item :label="$t('porter.media_type')">
                        <el-select v-model="form.type_id" :placeholder="$t('porter.Pleaseselect')"
                            style="display: block;" :popper-append-to-body="false" popper-class="dropdown">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.type" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 未做多语言 -->
                    <el-form-item :label="$t('porter.media_Country')">
                        <el-select v-model="form.country_id" :placeholder="$t('porter.Pleaseselect')"
                            style="display: block;" :popper-append-to-body="false" popper-class="dropdown">
                            <el-option v-for="item in cityList" :key="item.id" :label="item.city" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('porter.media_cover')">
                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :http-request="uploadHandel1" :on-remove="remeveFile">
                            <img v-if="form.media_cover" :src="form.media_cover" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="button-porter1"
                        @click="dialogVisible3 = false">{{ $t('porter.Cancel') }}</el-button>
                    <el-button class="button-porter-play" type="primary"
                        @click="xiugai">{{ $t('porter.Confim') }}</el-button>
                </span>
            </el-dialog>
            <el-dialog :width="dialogWidth" custom-class="porter-dialog" :title="$t('porter.operate')"
                :visible.sync="dialogVisible4" :class="Reverse ? 'Reverse' : ''">
                <div style="margin-bottom: 20px ; color: red;">演示接口-填写平台获得的收益：
                    <br>如被分享用户观看了广告,平台获得2元收益。就填写2，点击提交就会给当前用户按照专属规则分佣。
                </div>
                <el-input v-model="price"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button class="button-porter1"
                        @click="dialogVisible4 = false">{{ $t('porter.Cancel') }}</el-button>
                    <el-button class="button-porter-play" type="primary"
                        @click="submitHandel">{{ $t('porter.Confim') }}</el-button>
                </span>
            </el-dialog>
            <el-dialog :title="$t('porter.withdrawlist')" custom-class="porter-dialog" :visible.sync="dialogVisible5"
                :width="dialogWidth">
                <el-table class="my-custom-table" :data="withdrawList" align="center" border :header-cell-style="{
        background: 'transparent !important', 'border-color': '#344264'
    }" style="background-color: transparent;" :class="Reverse ? 'Reverse' : ''">
                    <el-table-column prop="uid" align="center" label="userid">
                    </el-table-column>
                    <el-table-column prop="paypal_account" show-overflow-tooltip align="center"
                        :label="$t('porter.paypal_account')">
                    </el-table-column>
                    <el-table-column prop="amount" align="center" :label="$t('porter.amount')">
                    </el-table-column>
                    <el-table-column prop="status" align="center" :label="$t('porter.status')">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0" size="mini" type="warning">{{ $t('porter.Reviewing')
                            }}</el-tag>
                            <el-tag v-if="scope.row.status == 1" size="mini" type="success">{{ $t('porter.success')
                            }}</el-tag>
                            <el-tag v-if="scope.row.status == 2" size="mini" type="danger">{{ $t('porter.Rejected')
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reason" align="center" :label="$t('porter.reason')">
                    </el-table-column>
                    <el-table-column prop="update_date" align="center" :label="$t('porter.update_time')" width="180">
                    </el-table-column>
                </el-table>
            </el-dialog>

        </div>
        <footer :class="Reverse ? 'Reverse' : ''">
            <div class="container">
                <div class="footer-content">
                    <div class="footer-link">
                        <div class="row flex_between">

                            <div class="col-12 shou">
                                <div class="link-label fw700 f-16">Dowanload</div>
                                <ul class="list-unstyled c-ccc f-16">
                                    <div class="imgbox PCSHOW">
                                        <img src="@/assets/googlePlay.webp" class="img" alt="">
                                    </div>
                                    <div class="imgbox PCSHOW">
                                        <img src="@/assets/Apk.webp" class="img" alt="">
                                    </div>
                                    <div class="imgbox APPSHOW">
                                        <img src="@/assets/googlePlay1.webp" class="img" alt="">
                                    </div>
                                    <div class="imgbox APPSHOW">
                                        <img src="@/assets/Apk1.webp" class="img" alt="">
                                    </div>
                                </ul>
                            </div>
                            <div class="col-6 ">
                                <div class="link-label fw700 f-16">{{ $t('home.Help') }}</div>
                                <ul class="list-unstyled c-ccc f-14">
                                    <li>
                                        <router-link to="/TermsofService">{{ $t('home.HelpCentre') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/TermsofService">{{ $t('home.Contactus') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.VulnerabilityRewardProgramme') }}</router-link>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-6 ">
                                <div class="link-label fw700   f-16">{{ $t('home.Legal') }}</div>
                                <ul class="list-unstyled c-ccc f-14">
                                    <li>
                                        <router-link to="/TermsofService">{{ $t('home.TermsofService') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.AdditionalVPNTermsofService') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.PrivacyandDataPolicy') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.Copyrightnoticesubmission') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.TakedownGuidancePolicy') }}</router-link>
                                    </li>
                                    <li>
                                        <router-link
                                            to="/TermsofService">{{ $t('home.Copyrightdispute') }}</router-link>
                                    </li>
                                </ul>
                            </div>
                            <!-- <div class="col-6 disabled">
                              <div class="link-label fw700 c-000 f-21" style="color: transparent;">Legal</div>
      
                              <ul class="list-unstyled c-ccc f-16">
                                  <li>
                                      <a>
                                          {{ $t('home.TakedownGuidancePolicy') }}
                                      </a>
                                  </li>
                                  <li>
                                      <a> {{ $t('home.Copyrightdispute') }} </a>
                                  </li>
                              </ul>
                          </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
import axios from 'axios'
import {
    mapState,
    mapGetters,
    mapMutations
} from "vuex";
import pageHeader from "@/components/page-header.vue";
export default {
    name: 'porter',
    components: {
        pageHeader
    },

    computed: {
        ...mapGetters([
            "uid",
            "token",
            "loginState",
            "email",
            "Reverse"
        ]),
    },
    data() {
        return {
            imageUrl: '',
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            form: {

            },
            form1: {

            },
            form2: {

            },
            userInfo: {},
            mediaList: [],
            links: [],
            media_name: '',
            price: '',
            queryInfo: {},
            index: 1,
            withdrawList: [],
            queryParams: {
                page: 1,
                size: 10,
            },
            total: 0,
            queryParams1: {
                page: 1,
                size: 5,
            },
            total1: 0,
            typeList: [],
            cityList: [],
            // type_id: '',
            // country_id: '',
            dialogWidth: '540px', // 默认宽度为30%
            dialogWidth1: '800px', // 默认宽度为30%

        }
    },
    mounted() {
        if (!this.uid) {
            this.$router.replace('/')
        }

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateDialogWidth);
    },
    created() {
        this.init()
        this.initMediaList()
        this.getCityList()
        this.getTypeList()
        this.updateDialogWidth();

        window.addEventListener('resize', this.updateDialogWidth);

    },
    methods: {
        updateDialogWidth() {
            this.dialogWidth = window.innerWidth < 600 ? '86%' : '540px';
            this.dialogWidth1 = window.innerWidth < 600 ? '86%' : '700px';
        },
        ...mapMutations([
            "setUid",
            "setToken",
            "setEmail",
        ]),
        async getTypeList() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaType')
            this.typeList = res.data
        },
        async getCityList() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaCity')
            this.cityList = res.data
        },
        showLanguageHandel() {
            this.$refs.languageRef.close();
        },
        goAdmin() {
            if (!this.uid) {
                this.dialogVisible = true
            } else {
                this.$router.push('/porter')
            }
        },
        showDialogVisible() {
            this.dialogVisible = true
        },
        logOut() {
            this.$confirm(this.$t('home.Confirmtoexit'), this.$t('home.LogoutConfirmation'), {
                confirmButtonText: this.$t('home.Confirm'),
                cancelButtonText: this.$t('home.Cancel'),
                type: 'warning'
            })
                .then(_ => {
                    localStorage.clear();
                    this.setUid('');
                    this.setToken('');
                    this.setEmail('');
                    this.$router.push('/')
                    done();
                })
                .catch(_ => { });
        },
        async Enable(row) {
            let status = 0
            if (row.status == 0) {
                status = 1
            } else {
                status = 0
            }
            let query = {
                id: row.id,
                status: status
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/editLink', query)
            if (res.code == 0) {
                this.$message.success('success')
                let querys = {
                    id: row.media_id,
                    uid: row.uid
                }
                this.getLinks(querys)
            }
        },
        out() {
            this.$router.replace('/')
        },
        async uploadHandel(e) {

            this.imageUrl = URL.createObjectURL(e.file);
            // 创建 FormData 对象
            const formData = new FormData();
            // 将文件添加到 FormData 对象中，键名要与 multer 配置中的 upload.single 参数一致
            formData.append('file', e.file);
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
            // 更新 imageUrl
            if (res.code == 0) {
                this.imageUrl = res.fileUrl;
            } else {
                console.error('文件上传失败:', res.message);
            }
        },
        async uploadHandel1(e) {

            this.imageUrl = URL.createObjectURL(e.file);
            // 创建 FormData 对象
            const formData = new FormData();
            // 将文件添加到 FormData 对象中，键名要与 multer 配置中的 upload.single 参数一致
            formData.append('file', e.file);
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
            // 更新 imageUrl
            if (res.code == 0) {
                this.form.media_cover = res.fileUrl;
            } else {
                console.error('文件上传失败:', res.message);
            }
        },
        remeveFile() {
            this.imageUrl = ''
        },
        shenqingtixian() {
            this.form1 = {}
            this.dialogVisible2 = true
        },
        getWithdrawListHandel() {
            this.getWithdrawList()
            this.dialogVisible5 = true
        },
        close() {
            this.init()
            this.initMediaList()
        },
        async importHandel(row) {
            let query = {
                id: row.id,
                uid: row.uid
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/trackUserActivityParse', query)
            if (res.code == 0) {
                this.$message.success('success');
                let querys = {
                    id: row.media_id,
                    uid: row.uid
                }
                this.getLinks(querys)
            } else {
                this.$message.error(res.msg)
            }
        },
        async play(row) {

            let query = {
                id: row.id,
                uid: row.uid
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/trackUserActivityPlay', query)
            if (res.code == 0) {
                this.$message.success('success');
                let querys = {
                    id: row.media_id,
                    uid: row.uid
                }
                this.getLinks(querys)
            } else {
                this.$message.error(res.msg)
            }
        },
        async adview(row) {
            this.queryInfo = {}
            this.queryInfo = Object.assign({}, row);
            this.price = ''
            this.index = 1
            this.dialogVisible4 = true

        },
        async adviewClick(row) {
            this.queryInfo = {}
            this.queryInfo = Object.assign({}, row);
            this.price = ''
            this.index = 2
            this.dialogVisible4 = true

        },
        async submitHandel() {
            if (!this.price) return
            let request = ''
            if (this.index == 1) {
                request = 'https://chatai-pro.wecall.info/node/porter/trackUserActivityAdView'
            } else if (this.index == 2) {
                request = 'https://chatai-pro.wecall.info/node/porter/trackUserActivityAdViewClick'
            }
            let query = {
                id: this.queryInfo.id,
                uid: this.queryInfo.uid,
                income: this.price
            }
            const {
                data: res
            } = await axios.post(request, query)
            if (res.code == 0) {
                this.$message.success('success');
                let querys = {
                    id: this.queryInfo.media_id,
                    uid: this.queryInfo.uid,
                }
                this.getLinks(querys)
            } else {
                this.$message.error(res.msg);
            }
            this.dialogVisible4 = false
        },
        copy(row) {
            this.$copyText(row.link_url).then(
                (e) => {
                    this.$message.success('success');
                    console.log(e);
                },
                (err) => {
                    console.log(err);
                }
            );

        },
        async createLink() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/createLink', this.form2)
            if (res.code == 0) {
                this.$message.success('success');
                this.queryParams1.page = 1
                this.getLinks(this.form2)

            }
        },
        getLinkList(newPage) {
            this.queryParams1.page = newPage
            this.getLinks(this.form2)
        },

        async getLinks(row) {

            let query = {
                media_id: row.id,
                uid: row.uid,
                size: this.queryParams1.size,
                page: this.queryParams1.page,
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getLinkList', query)
            res.data.forEach(item => {
                if (item.adView_click_total == null) {
                    item.adView_click_total = 0
                }
                item.revenue_total = '$' + item.revenue_total
            })
            this.links = res.data
            this.total1 = res.total
            this.dialogVisible1 = true

        },
        async xiugai() {
            let query = {
                id: this.form.id,
                media_name: this.form.media_name,
                media_url: this.form.media_url,
                imageUrl: this.form.media_cover,
                country_id: this.form.country_id,
                type_id: this.form.type_id,
                status: 2,
                reason: '-'
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/editMedia', query)
            if (res.code == 0) {
                this.dialogVisible3 = false
                this.initMediaList()

            }
        },
        xiugaiziyuan(row) {
            this.form = Object.assign({}, row);
            this.dialogVisible3 = true

        },
        async init() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getUsreInfo', {
                id: this.uid
            })
            this.userInfo = res.data
        },
        async addMedia() {
            if (!this.form.media_name) return this.$message.error('Please fill in the resource name');
            if (!this.form.media_url) return this.$message.error('Please fill in the resource address');
            if (!this.form.country_id) return this.$message.error('Please select the source country');
            if (!this.form.type_id) return this.$message.error('Please select the resource type');
            if (!this.imageUrl) return this.$message.error('Please fill in the resource imageUrl');
            let query = {
                id: this.form.id,
                media_name: this.form.media_name,
                media_url: this.form.media_url,
                country_id: this.form.country_id,
                type_id: this.form.type_id,
                imageUrl: this.imageUrl,
                email: this.email,
                nickname: this.userInfo.nickname,
                uid: this.uid
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/editMedia', query)
            if (res.code == 0) {
                this.dialogVisible = false
                this.$message.success('success');
                this.initMediaList()
            }
        },
        async initMediaList(newPage) {
            this.queryParams.uid = this.uid
            this.queryParams.page = newPage
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaList', this.queryParams)
            res.data.forEach(item => {
                if (item.adView_click_totals == null) {
                    item.adView_click_totals = 0
                }
                item.revenue_totals = '$' + item.revenue_totals
            })
            this.mediaList = res.data
            this.total = res.total
            console.log(this.mediaList)
        },
        add() {
            this.imageUrl = ''

            this.form = {}
            this.dialogVisible = true
        },
        handleDetail(row) {
            this.media_name = row.media_name
            this.queryParams1.page = 1
            this.form2 = row
            this.getLinks(row)
        },
        async tixian() {
            if (!this.form1.email) return this.$message.error('Bank card cannot be empty')
            if (!this.form1.amount) return this.$message.error('Amount cannot be empty')
            let query = {
                id: 1,
                email: this.form1.email,
                amount: this.form1.amount,
            }
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/withdraw', query)
            if (res.code == 0) {
                this.$message.success('Submitted for review...')
                this.init()
                this.dialogVisible2 = false
            } else {
                this.$message.error(res.msg)
            }
        },
        async getWithdrawList() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/withdrawListById', {
                id: 1
            })
            console.log(res)
            this.withdrawList = res.data
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.userInfo-box {
    .bg-img {
        background: url('@/assets/img_bg.webp') no-repeat;
        background-size: 100% auto;
        height: 280px;
        padding-left: 20px;
        color: #fff;

        .info {
            .title {
                font-size: 24px;
                font-weight: 800;
            }

            font-size: 18px;
            font-weight: bold;

            .item {
                margin-top: 24px;

                .withdrawable {
                    margin-left: 40px;
                }

                .name {
                    margin-right: 4px;
                }
            }
        }
    }

    margin-bottom: 10px;
}

::v-deep .porter-dialog-link {
    padding-bottom: 40px;
}

::v-deep.el-pagination button:disabled {
    color: #344264;
}

::v-deep .el-pagination .btn-next {
    color: #fff;
}

::v-deep .el-pagination .btn-prev {
    color: #fff;
}

.media_name_dialog {
    color: #eee;
}

.createLink {
    padding: 6px 10px;
    background: #344264;
    border-radius: 5px;
    color: #eee;
    font-family: Arial-Regular;
    font-size: 14px;

    .img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }
}

.head {
    margin-top: 20px;
}

.btns {
    margin-bottom: 20px;
}

.pagination {
    margin: 20px 0;
    float: right;
}

.addbtn {
    padding: 10px 20px;
    background-color: #344264;
    border-radius: 5px;
    font-size: 14px;

    .imgbg {
        width: 24px;
        height: 24px;
        background: url('@/assets/add.webp') no-repeat;
        background-size: 24px 24px;
        margin-right: 4px;
    }
}

::v-deep .Applyforwithdrawal {
    background: linear-gradient(140deg, #F4BB62 0%, #E25127 100%);
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 8px;
}

::v-deep .Withdrawalrules {
    background: #344264;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 8px;
}

::v-deep .Withdrawalsrecord {
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 8px;
}

.el-tag.el-tag--success {
    background: rgba(3, 238, 118, 0.15);
    border: 0;
}

.el-tag.el-tag--warning {
    background: rgba(230, 162, 60, .15);
    border: 0;
}

.el-button--warning.is-plain {
    background-color: #FF2D4F;
    background-color: transparent;
    border-color: #FF2D4F;
    color: #FF2D4F;
}

.el-button--primary.is-plain {
    background-color: #4089F7;
    background-color: transparent;
    border-color: #4089F7;
    color: #4089F7;
}

::v-deep .el-card {
    background: #101433;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 20px;
    margin-bottom: 30px;
}

::v-deep .my-custom-table tr {
    background: transparent !important;
    color: #fff;
    font-size: 12px;
}

.el-table--border {
    border-color: #344264;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-color: #344264 !important;
}

.el-table::before {
    background-color: #344264;
}

.el-table--border::after {
    background-color: #344264;
}

::v-deep .el-table__body {
    tr:hover>td {
        background-color: #1f2b49 !important;
    }
}

::v-deep .el-table__body {
    .el-table__row .hover-row {
        background-color: #1f2b49 !important;
    }
}

::v-deep .el-pagination button {
    background-color: transparent !important;
}

::v-deep .el-pager li {
    background-color: transparent !important;
}

::v-deep .porter-dialog {
    background-color: #222C44;
    border: 2px solid #344264;
    border-radius: 16px;

}

::v-deep .el-form-item__label {
    color: #eee;
    font-size: 16px;
}

::v-deep .el-dialog__title {
    color: #eee;
    font-size: 20px;
}

::v-deep .el-input__inner {
    background-color: transparent;
    border-color: #4089F7;
    color: #eee;
}

::v-deep .button-porter1 {
    background: #344264;
    border: 0;
    color: #fff;
}

::v-deep.button-porter-play {
    border: 0;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .el-select-dropdown {
    background-color: #222C44 !important;
    border-color: #344264;



}

::v-deep .el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: #344264 !important;
}

::v-deep .el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #344264 !important;
}

::v-deep .el-input__inner {
    border-color: #4089F7;
}

.dropdown {
    box-sizing: border-box;
    z-index: 99999 !important;



    .el-select-dropdown__item {
        color: #7F90BC;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        color: #EEEEEE;
        background-color: #344264;
    }

}

.el-select-dropdown__wrap {
    background: #222C44 !important;
}

.el-pagination {
    color: #fff;
}

h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}



// a {
//     color: #42b983;
// }

.container {
    flex: 1;
}

.userInfo {
    .item {
        margin-bottom: 10px;
    }
}

.APPSHOW {
    display: none;
}

::v-deep .el-upload {
    border: 1px dashed #d9d9d9 !important;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

footer {
    background-color: #01020F;

    .imgbox {
        margin-bottom: 8px;

        .img {
            width: 170px;
            height: 36px;
        }
    }

    .footer-content {
        padding: 50px 0 30px;

        .row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;

            .link-label {
                color: #eee;
            }

            .col-12 {
                flex: 0 0 auto;
                width: 33.33333333%;
            }

            .col-6 {
                flex: 0 0 auto;
                width: 33.33333333%;
            }

            .list-unstyled {
                margin-top: 20px;
                list-style: none;
                color: #8C8D9B;

                li {
                    margin-bottom: 20px;
                }

                li:hover {
                    color: #fff;
                }
            }
        }

        .copyright {
            margin-top: 40px;

            div {
                margin-top: 8px;
            }
        }
    }
}

.Reverse {
    .userInfo-box {
        .bg-img {
            padding-left: 0;
            padding-right: 20px;
            background: url('@/assets/img_bg_rlt.webp') no-repeat;
            background-size: 100% auto;
        }

    }

    .el-button+.el-button {
        margin-left: 0;
        margin-right: 10px;
    }

    .addbtn {
        .imgbg {
            margin-left: 4px;
            margin-right: 0;
        }
    }

    .createLink {
        .img {
            margin-right: 0;
            margin-left: 6px !important;
        }
    }
}

@media (max-width: 992px) {
    .userInfo-box {
        font-family: Arial-Bold;

        .bg-img {
            background: url('@/assets/img_bg.webp') no-repeat;
            background-size: cover;
            height: 180px;
            padding-left: 20px;
            color: #fff;
            border-radius: 16px;

            .info {
                .title {
                    font-size: 20px;
                }

                font-size: 18px;
                font-weight: bold;

                .item {
                    margin-top: 10px;

                    .withdrawable {
                        margin-left: 40px;
                    }

                    .name {
                        margin-right: 4px;
                    }
                }
            }
        }

        margin-bottom: 10px;
    }

    .btns {
        display: block;
        font-family: Arial-Bold;

        .Applyforwithdrawal {
            width: 100%;
            height: 44px;
            font-size: 14px;
            margin-top: 10px;
            font-family: Arial-Bold;
        }

        .Withdrawalrules,
        .Withdrawalsrecord {
            margin-top: 16px;
            width: 49%;
            font-size: 14px;
            font-family: Arial-Bold;
            padding: 16px 0;
        }
    }

    .Reverse {
        .userInfo-box {
            .bg-img {
                padding-left: 0;
                padding-right: 20px;
                background: url('@/assets/img_bg_rlt.webp') no-repeat;
                background-size: 100% auto;
            }

        }

        .el-button+.el-button {
            margin-left: 0;
            margin-right: 10px;
        }

        .addbtn {
            .imgbg {
                margin-left: 4px;
                margin-right: 0;
            }
        }

        .createLink {
            .img {
                margin-right: 0;
                margin-left: 6px !important;
            }
        }
    }
}

@media (max-width: 768px) {
    .pagination {
        margin: 10px 0;
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .PCSHOW {
        display: none;
    }

    .APPSHOW {
        display: block;
    }

    .head {
        margin-top: 8px;
    }

    ::v-deep .el-table--border .el-table__cell {
        border-right: 0;
    }

    ::v-deep .el-table--border {
        border: 0;
    }

    ::v-deep .el-table--border::after {
        width: 0;
    }

    ::v-deep .has-gutter {
        background-color: #101433;
    }

    ::v-deep .porter-dialogLogin {
        .el-dialog__header {
            padding: 20px;
        }
    }

    ::v-deep .porter-dialog {
        border: 0 !important;
    }

    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-dialog__header {
        padding: 20px;
    }

    .userInfo-box {
        font-family: Arial-Bold;

        .bg-img {
            background: url('@/assets/img_bg.webp') no-repeat;
            background-size: cover;
            height: 134px;
            padding-left: 20px;
            color: #fff;
            border-radius: 16px;

            .info {
                .title {
                    font-size: 16px;
                }

                font-size: 14px;
                font-weight: bold;

                .item {
                    margin-top: 10px;

                    .withdrawable {
                        margin-left: 40px;
                    }

                    .name {
                        margin-right: 4px;
                    }
                }
            }
        }

        margin-bottom: 10px;
    }

    .myMedia {
        font-size: 16px;
        font-family: Arial-Bold;
    }

    .appadd {
        color: #407DFF;
        font-size: 14px;
    }

    ::v-deep .el-card {
        background-color: transparent;
        border-radius: 0;
    }

    ::v-deep .el-card__body {
        padding: 0;
    }

    .btns {
        display: block;
        font-family: Arial-Bold;

        .Applyforwithdrawal {
            width: 100%;
            height: 44px;
            font-size: 14px;
            margin-top: 10px;
            font-family: Arial-Bold;
        }

        .Withdrawalrules,
        .Withdrawalsrecord {
            margin-top: 16px;
            width: 49%;
            font-size: 14px;
            font-family: Arial-Bold;
            padding: 16px 0;
        }
    }

    .container {
        padding: 0 14px;
    }

    footer {
        background-color: #01020F;

        .footer-content {
            padding: 50px 0 30px;

            .row {
                display: flex;
                flex-wrap: wrap;

                .col-12 {
                    flex: 0 0 auto;
                    width: 100%;
                    margin-bottom: 10px;

                    .list-unstyled {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .imgbox {
                            width: 48%;
                        }

                        .img {
                            width: 100%;
                            height: auto;
                        }
                    }
                }

                .col-6 {
                    flex: 0 0 auto;
                    width: 50%;
                }

                .list-unstyled {
                    margin-top: 20px;
                    list-style: none;
                    color: #8C8D9B;
                    font-size: 14px;

                    li {
                        margin-bottom: 20px;
                    }
                }
            }

            .copyright {
                margin-top: 40px;

                b {
                    font-size: 14px !important;
                }

                div {
                    margin-top: 8px;
                    font-size: 14px !important;
                }
            }
        }
    }

    .Reverse {
        .userInfo-box {
            .bg-img {
                padding-left: 0;
                padding-right: 20px;
                background: url('@/assets/img_bg_rlt.webp') no-repeat;
                height: 134px;
                        background-size: cover
            }

        }

        .el-button+.el-button {
            margin-left: 0;
            margin-right: 10px;
        }

        .addbtn {
            .imgbg {
                margin-left: 4px;
                margin-right: 0;
            }
        }

        .createLink {
            .img {
                margin-right: 0;
                margin-left: 6px !important;
            }
        }
    }
}
</style>